<ion-header title="首页">
  <ion-navbar>
    <ion-title>
      <ion-item class='search'>
          <ion-label class='searchIon' [ngClass]="{'isFocus':searchGetTheFocus==1,'loseFocus':searchGetTheFocus==2}">
          </ion-label>
          <ion-input placeholder='搜素美图，美甲师，店铺' class='search-input' (click)='getFocus($event)' [(ngModel)]='myInput'></ion-input>
      </ion-item>
    </ion-title>
  </ion-navbar>
  <div class="xuanze" style="width:100%;background:white;margin-top:0.05rem;">
    <ion-segment [(ngModel)]="func" style="padding:0.3rem 0;height: 100%;margin:0 auto;display: flex;justify-content: space-around;">
      <!-- <ion-segment-button active value="recommend" (ionSelect)="selectFunc('NailShopPage')"> -->
      <ion-item >
        <ion-label style="overflow: initial" [ngClass]="{'red':red==1||red==2||red==3||red==4}" >
          智能排序<ion-icon name="arrow-down" [ngClass]="{'xia':red==1||red==2||red==3||red==4}" style="margin-left:0.5rem"></ion-icon>
          <div [ngClass]="{'bord':red==1||red==2||red==3||red==4}"></div>
        </ion-label>
        <ion-select  [(ngModel)]="toppings" (ngModelChange)="GetTabBarShopsAPI(toppings)" style="padding-left: 0px;" okText="确认" cancelText="取消">
          <ion-option value="1">款式优先</ion-option>
          <ion-option value="2">销量优先</ion-option>
          <ion-option value="3">人气优先</ion-option>
          <ion-option value="4">好评优先</ion-option>
        </ion-select>
    
      </ion-item>
      <!-- </ion-segment-button> -->

      <!-- <ion-segment-button value="nailShop" (ionSelect)="selectFunc('NailShopPage')"> -->
      <ion-item>
        <ion-label style="overflow: initial"  [ngClass]="{red:red==5||red==6||red==7}">附近美店<ion-icon name="arrow-down" [ngClass]="{'xia':red==5||red==6||red==7}" style="margin-left:0.5rem"></ion-icon>
            <div [ngClass]="{'bord':red==5||red==6||red==7}"></div>
        </ion-label>
        <ion-select [(ngModel)]="gaming" (ngModelChange)="GetTabBarShopsAPI(gaming)" style="padding-left: 0px;" okText="确认" cancelText="取消">
          <ion-option value="5">500米</ion-option>
          <ion-option value="6">1000米</ion-option>
          <ion-option value="7">1500米</ion-option>
        </ion-select>
      </ion-item>
      <!-- </ion-segment-button> -->

      <!-- <ion-segment-button value="train" (ionSelect)="selectFunc('NailShopPage')"> -->
      <!-- <ion-item>
        <ion-label>服务方式</ion-label>
        <ion-select [(ngModel)]="serveStyle" (ngModelChange)="GetTabBarShopsAPI(serveStyle)" style="padding-left: 0px;" okText="确认"
          cancelText="取消">
          <ion-option value="8">上门</ion-option>
          <ion-option value="9">到店</ion-option>
        </ion-select>
      </ion-item> -->
      <!-- </ion-segment-button> -->
      <!-- <p> <hr style="width:50%"></p>-->
    </ion-segment>
  
  </div>
  <!-- <div class="naniler">
        <div>如何申请成为<span>美甲店铺</span>？</div>
        <div> 查看详情</div>
    </div> -->
  <div class="naniler" *ngIf="isToShop">
    <div>如何申请成为<span>美甲店铺</span>？</div>
    <div (tap)=" shop()">查看详情</div>
  </div>

  <!-- <ion-buttons end>
            <button ion-button icon-only>
                查看详情
            </button>
        </ion-buttons>
    </ion-toolbar> -->
    
</ion-header>


<ion-content  [ngClass]="{up:isUp}">

    <ion-refresher (ionRefresh)="doRefresh($event)"> 
        <ion-refresher-content pullingIcon="arrow-dropdown" refreshingSpinner="circles"> 
        </ion-refresher-content>
        <!-- <ion-refresher-content > 
    </ion-refresher-content> -->
    </ion-refresher>
  <ion-list class="cont" *ngFor="let item of ShopArr">
    <div class="avater" (click)="toShopDetail(item.shop_id)">
      <div class="detailLeft clearfix" style="display: inline-flex;padding-bottom: 0.5rem">
        <div class="shopImg">
          <!-- <img src="http://www.mengfeisi.com.cn/Uploads/nail_album/2017-03-07/1_328.jpg"> -->
          <img src='{{pictureurl}}{{item.shop_logo}}'>
        </div>
        <div class="ShopDetail ">
          <div class="clearfix">
            <h4 style="margin:0;padding:0;float:left;font-size:16px;">{{item.shop_name}}</h4>
            <!-- <span class="getWay" *ngIf="item.on_site_service==1&&item.on_shop_service==1">上门 | 到店</span>
            <span class="getWay" *ngIf="item.on_site_service==1&&item.on_shop_service==0">上门</span>
            <span class="getWay" *ngIf="item.on_site_service==0&&item.on_shop_service==1">到店</span>
            <span class="getWay" *ngIf="item.on_site_service==0&&item.on_shop_service==0"></span> -->
          </div>
          <p style="margin:0;color: #ccc; padding: 0.3rem 0;font-size:12px;">{{item.service_count}}款美图 | {{item.fans}}粉丝</p>
          <p style="margin:0;color: #ccc; padding: 0;font-size:12px;">{{item.shop_address}}</p>
        </div>
      </div>
      <div class="attention" *ngIf="showAttentio">
        <button class="setAtt" (click)=" unsetAttention(event,item.is_focus,item.shop_id);$event.stopPropagation()" *ngIf="item.is_focus==0?true:false">
            <img src="assets/img/ios/guanzhu@2x.png" alt="" class="heart">
          关注
        </button>
        <button class="unsetAtt" (click)="unsetAttention(event,item.is_focus,item.shop_id);$event.stopPropagation()" *ngIf="item.is_focus==1?true:false">已关注</button>
      </div>
    </div>
    <div class="imglist ">
      <ul class="clearfix">
        <li *ngFor="let nail of item.service_display_three">
          <div class="listDetail">
            <div class="detalPic" (click)="toShopInfo(nail.service_id,item.shop_id)">
              <!-- <img src="http://www.mengfeisi.com.cn/Uploads/nail_album/2017-03-07/2_328.jpg"> -->
              <img src='{{pictureurl}}{{nail.nail_image}}'>
            </div>
            <div style="font-size: 12px;"><span style=" overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        width:39%;
                        height: 25px;
                        line-height:25px;
                        display: inline-block;
                          ">
    {{nail.nail_name}}</span><span style="float:right;margin-top:4px;">{{nail.service_price}}</span></div>
          </div>
        </li>
        <!-- <li>
          <div class="listDetail">
            <div class="detalPic" (click)="toShopInfo()">
              <img src="http://www.mengfeisi.com.cn/Uploads/nail_album/2017-03-07/2_328.jpg">
            </div>
            <p style="font-size: 12px;">精致单色美甲<span style="color:red;margin-left: 5px;">29.00</span></p>
          </div>
        </li>
        <li>
          <div class="listDetail">
            <div class="detalPic" (click)="toShopInfo()">
              <img src="http://www.mengfeisi.com.cn/Uploads/nail_album/2017-03-07/2_328.jpg">
            </div>
            <p style="font-size: 12px;">精致单色美甲<span style="color:red;margin-left: 5px;">29.00</span></p>
          </div>
        </li> -->
      </ul>
    </div>




  </ion-list>

  <ion-infinite-scroll (ionInfinite)="doInfinite($event)"> 
      <ion-infinite-scroll-content
       loadingSpinner="bubbles"
       loadingText="加载中..."> 
       </ion-infinite-scroll-content> 
   </ion-infinite-scroll>

   <div *ngIf='btm' style="text-align: center;color: #999;margin: 1rem">已经到底啦！</div>
  <div class="botLine">
    <div class="line float overleft"></div>
    美丽 从指尖开始
    <div class="line float overright"></div>
  </div>
  <ion-fab right bottom (tap)="add1()" *ngIf="haveId==true">
      <button ion-fab>
          <img src="assets/img/ios/fabu.png" alt="" class="float2">
        </button>
    </ion-fab>

    <div style="height: 6rem;"></div>
</ion-content>
